<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>User Register</title>

<link rel="stylesheet" type="text/css" href="ubms.css" media="screen" />

<script language="JavaScript">
var xmlHttp;

function initRequest() {
 	if (window.XMLHttpRequest) {
  		xmlHttp = new XMLHttpRequest();
 	} else if (window.ActiveXObject) {
  		isIE = true;
  		xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
 	}
}

function validateUserId() { 
 	initRequest();
 	xmlHttp.onreadystatechange = processRequest; // callback function
 	var target = document.getElementById("username");
 	var url = "userNameCheck.jsp?username=" + escape(target.value);
 	xmlHttp.open("GET", url, true);
 	xmlHttp.send(null);
}

function processRequest() {
 	if (xmlHttp.readyState == 4) {
  		if (xmlHttp.status == 200) {
			//responseText 를 셋팅
   			document.getElementById("msg").innerHTML = xmlHttp.responseText;
  		}
 	}
}

function empty(str) {
	if (str == "" || str.length == 0) {
		return true;
	} else {
		return false;
	}
}
function lenCheck(str) {
	if (empty(str) || str.length > 16) {
		return true;
	} else {
		return false;
	}
}

function checkValue() {
	var id = document.regForm.username.value;
	var pw = document.regForm.password.value;
	var fn = document.regForm.firstname.value;
	var ln = document.regForm.lastname.value;
	var em = document.regForm.email.value;

	var valid = true;
	var msg = "";
	
	if(lenCheck(id))
	{
		msg = msg + "Username should be any alphanumeric string with 16 characters or less.\n";
	 	valid = false;
	}

	if(lenCheck(pw))
	{
		msg = msg + "Password should be any alphanumeric string with 16 characters or less.\n";
		valid = false;
	}

	if (!empty(fn)) {
		if(lenCheck(fn))
		{
			msg = msg + "First Name should be any alphanumeric string with 50 characters or less.\n";
		 	valid = false;
		}
	}
	
	if (!empty(ln)) {
		if(lenCheck(ln))
		{
			msg = msg + "Last Name should be any alphanumeric string with 50 characters or less.\n";
		 	valid = false;
		}
	}

    if(!lenCheck(id))
    {
	    var idpattern = /(\S+)/;
	    //var idpattern = /^([a-zA-Z0-9_\.\-])+/;
	    if (!idpattern.test(id)) {
	    	 msg = msg + "Invalid Username.\n";
	    	 valid = false;
	     }
    }

	// email validation
	if (!empty(em)) {
	    //if(!lenCheck(em))
	    //{
		    var empattern = /(\S+)@(\S+)\.(\S+)/; 
			//var empattern = /([a-zA-Z0-9_\.\-])+\@([a-zA-Z0-9_\.\-])+\.([a-zA-Z0-9_\.\-])+/; 
			if (!empattern.test(em) ) {
		    	 msg = msg + "Invalid Email.";
		    	 valid = false;
		     }
	    //}
	}    

	if (!valid) {
		alert(msg);
	}
	
	return valid;
}
</script> 
</head>
<body>
<center>
<h2>UBMS Registration Page</h2>
</center>

<hr>

<form name="regForm" action="userRegister.jsp" method="post" onSubmit="return checkValue();">
	<center>
	<table class="tab_login">
		<tr>
			<td width="30%">&nbsp;</td>
			<td width="70%">* fields are required.</td>
		</tr>
		<tr>
			<td>First Name</td>
			<td><input class="input_1" type="text" name="firstname" maxLength="50"/></td>
		</tr> 
		<tr>
			<td>Last Name</td>
			<td><input class="input_1" type="text" name="lastname" maxLength="50"/></td>
		</tr>
		<tr>
			<td>e-mail</td>
			<td><input class="input_1" type="text" name="email" maxLength="50"/></td>
		</tr>
		<tr>
			<td row>User Name *</td>
			<td>
				<input class="input_1" type="text" name="username" id="username" maxLength="16" onKeyUp="validateUserId()"/><br>
				<div id="msg" style="color:red">
			</td>
		</tr>
		<tr>
			<td>Password *</td>
			<td><input class="input_1" type="password" name="password" maxLength="16"/></td>
		</tr>
		<tr>
			<td colspan="2" align="center">
				<input type="submit" value="Register"><input type="reset" value="Reset">
</form>
<form action = "index.jsp" name = "form2">
				<input type = "submit" name = "submit"  value = "Login">
</form>				
			</td>
		</tr>
	</table>
	</center>

</body>
</html>